<template>
  <Row justify="center" v-model:visible="visible">
    <Col :span="4">
      <Descriptions :column="1" class="mt-5">
        <DescriptionsItem label="应用">{{ data.appName }}</DescriptionsItem>
        <DescriptionsItem label="规格">{{ data.type }}</DescriptionsItem>
        <DescriptionsItem label="管理面策略">{{ data.deployStrategy == 'shared' ? '共享' : '独享' }}</DescriptionsItem>
        <DescriptionsItem label="数据库多租模式">{{ data.dbMultiTenantMode }}</DescriptionsItem>
        <DescriptionsItem label="应用多租模式">{{ data.appMultiTenantMode }}</DescriptionsItem>
        <DescriptionsItem v-if="false" label="文件系统">{{}}</DescriptionsItem>
        <DescriptionsItem v-if="false" label="文件系统类型">{{}} </DescriptionsItem>
        <DescriptionsItem v-if="false" label="挂载路径">{{}}</DescriptionsItem>
        <DescriptionsItem label="购买类型">{{
          data.paymentType == 'prePaid' ? '包周期' : '按需购买'
        }}</DescriptionsItem>
        <DescriptionsItem v-if="data.tenantType !== 1 && data.paymentType == 'prePaid'" label="购买时长"
          >{{ data.duration }} 个月</DescriptionsItem
        >
        <DescriptionsItem v-if="data.tenantType == 1" label="过期时间">{{
          dayjs(data.expireTime).format('YYYY-MM-DD HH:mm:ss')
        }}</DescriptionsItem>
      </Descriptions>
      <br />
      <div class="btn-wrapper">
        <Button @click="preStep">上一步</Button>
        <Button type="primary" @click="submit" style="margin-left: 10px">提交</Button>
      </div>
    </Col>
  </Row>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { Descriptions, DescriptionsItem, Row, Col, Button } from 'ant-design-vue';
import { createTenantBusinessResources, purchaseInstance } from '/@/api/instance-purchase/purchase';
import { SaaSPurchaseInstanceParams } from '/@/api/instance-purchase/model/purchaseModel';
import { useUserStoreWithout } from '/@/store/modules/user';
import dayjs from 'dayjs';
const visible = ref(false);
const userStore = useUserStoreWithout();
const userId = userStore.getUserInfo.userId;
interface Step2Data {
  appName: string;
  type: string;
  deployStrategy: string | undefined;
  dbMultiTenantMode: string;
  appMultiTenantMode: string;
  paymentType: string;
  duration?: number;
  expireTime: string;
  tenantType: number;
  initParams: SaaSPurchaseInstanceParams;
}
const data = ref({} as Step2Data);
const openStep2 = (appName: string, initParams: SaaSPurchaseInstanceParams) => {
  data.value.appName = appName;
  data.value.dbMultiTenantMode = initParams.dbMultiTenantMode;
  data.value.appMultiTenantMode = initParams.appMultiTenantMode;
  data.value.type = initParams.type;
  data.value.deployStrategy = initParams.deployStrategy;
  data.value.duration = initParams.duration;
  data.value.tenantType = initParams.tenantType;
  data.value.expireTime = initParams.expireTime;
  data.value.paymentType = initParams.paymentType;
  data.value.initParams = initParams;
  visible.value = true;
};
const emit = defineEmits(['prev', 'finish']);
const preStep = () => {
  emit('prev');
};
const submit = async () => {
  data.value.initParams.isEnableNotification = false;

  if (data.value.initParams.ifDeploy.isDeployConsole) {
    data.value.initParams.userId = userId;
    await createTenantBusinessResources({ processKey: undefined, packagePurchase: data.value.initParams }).then(
      (res) => {
        emit('finish', res);
      }
    );
  } else if (!data.value.initParams.ifDeploy.isDeployConsole) {
    await purchaseInstance(data.value.initParams).then(() => {
      emit('finish', '部署任务已提交');
    });
  }
};
defineExpose({ openStep2 });
</script>

<style lang="less" scoped>
.btn-wrapper {
  float: right;
}
</style>
